<!DOCTYPE html>
<html lang="">
    <head>
        <base href="/">
        <title>加载中</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="browsermode" content="application">
        <meta name="full-screen" content="yes" />
        <meta name="x5-fullscreen" content="true" />
        <meta name="x5-page-mode" content="app" />
        <meta name="360-fullscreen" content="true" />
        <link type="text/css" rel="stylesheet" href="resources/css/icon.css" />
        <link type="text/css" rel="stylesheet" href="resources/css/colorUi.css" />
        <link type="text/css" rel="stylesheet" href="resources/css/common.css" />
        <script src="resources/js/vue.global.js"></script>
        <script src="resources/js/axios.min.js"></script>
        <script src="resources/js/common.js"></script>
        <script src="resources/js/component.js"></script>
    </head>
    <body>
        <div id="app">
            <div id="app0" class="m-page"></div>
            <div class="cu-modal" :class="confirmParam.show?'show':''">
                <div class="cu-dialog">
                    <div class="cu-bar bg-white justify-end">
                        <div class="content">{{confirmParam.title}}</div>
                    </div>
                    <div class="padding-xl text-lg">
                        {{confirmParam.desc}}
                    </div>
                    <div class="cu-bar bg-white justify-end">
                        <div v-if="confirmParam.confirm" class="action margin-0 flex-sub text-lg" :class="confirmParam.loading?'text-gray':''" @click="confirmClose(false)">取消</div>
                        <div class="action margin-0 flex-sub solid-left text-lg" :class="confirmParam.loading?'text-gray':'text-blue'" @click="confirmClose(true)">
                            <span v-if="confirmParam.loading" class="cuIcon-loading2 cuIconfont-spin text-blue"></span>
                            确定
                        </div>
                    </div>
                </div>
            </div>
            <transition name="remindShow">
                <div v-if="remindParam.show" class="cu-bar fixed flex justify-center" @click="remindClose()" :style="{boxShadow:'none',top:'50px',zIndex:3000}">
                    <div v-if="remindParam.message" class="flex margin solid shadow radius light align-center justify-center" :class="['bg-'+remindParam.color]">
                        <div class="padding"><span class="cuIcon-info text-xxl"></span></div>
                        <div class="padding-tb-xs text-content">{{remindParam.message}}</div>
                        <div class="padding"><span class="cuIcon-close text-xxl text-red"></span></div>
                    </div>
                </div>
            </transition>
            <transition name="remindShow">
                <div v-if="loading&&!confirmParam.loading" class="cu-load load-modal"></div>
            </transition>
        </div>
        <script type="text/javascript">
            var app=Vue.createApp({
                data:function(){
                    return {
                        pageKey:"app",
                        confirmParam:{show:false,loading:false,confirm:false,title:'',desc:'',callback:null},
                        remindParam:{show:false,color:'',message:'',timer:null},
                        loadTimer:null,
                        loading:false,
                        isLoading:false
                    };
                },
                mounted(){
                    this.requestData('action/base/page/info',
                        {},
                        (data)=>{
                            if(data.code==0){
                                config.user=data.user;
                                config.business=data.business;
                                config.store=data.store;
                                config.app=data.app;
                                document.title=config.app.title;
                                //加载页面
                                let path=location.pathname;
                                let param=config.fn.getUrlParams(location.search);
                                if(path.indexOf('/web/')==0){
                                    this.openPage(path.substring(5),param);
                                }else{
                                    this.openPage('main.js');
                                }
                            }else{
                                this.remind('red',data.msg);
                            }
                        }
                    );
                },
                methods:{
                    setLoading:function(flag){
                        if(this.loadTimer){
                            clearTimeout(this.loadTimer);
                        }
                        this.isLoading=flag;
                        if(flag){
                            this.loadTimer=setTimeout(()=>{
                                this.loading=true;
                            },500);
                        }else{
                            this.loadTimer=setTimeout(()=>{
                                this.loading=false;
                            },50);
                        }
                    },
                    confirm:function(title,desc,callback){
                        this.confirmParam={show:true,loading:false,confirm:true,title:title,desc:desc,callback:callback};
                    },
                    confirmClose:function(flag){
                        if(this.confirmParam.loading) return;
                        this.confirmParam.loading=true;
                        if(flag&&this.confirmParam.callback){
                            this.confirmParam.callback();
                            this.confirmParam.callback=null;
                        }
                        let fn=()=>{
                            setTimeout(()=>{
                                if(this.isLoading){
                                    fn();
                                }else{
                                    this.confirmParam.show=false;
                                    setTimeout(()=>{
                                        this.confirmParam.loading=false;
                                    },300);
                                }
                            },100);
                        };
                        fn();
                    },
                    alert:function(title,desc,callback){
                        this.confirmParam={show:true,loading:false,confirm:false,title:title,desc:desc,callback:callback};
                    },
                    remind:function(color,message){
                        if(null!=this.remindParam.timer) clearTimeout(this.remindParam.timer);
                        this.remindParam={show:true,color:color,message:message,timer:setTimeout(()=>{this.remindParam.show=false;},3000)};
                    },
                    remindClose:function(){
                        if(null!=this.remindParam.timer) clearTimeout(this.remindParam.timer);
                        this.remindParam.show=false;
                    }
                }
            });
            app.mixin(mixin);
            app.use(component);
            config.index=app.mount('#app');
            config.index.pageKey='app';
        </script>
    </body>
</html>
